<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>images_fixed</title>
    <script src="jquery-1.7.2.js"></script>
</head>
<body>
<style>
    .warp {
        width: 100%;
        height: 2000px;
        display: block;
        background-color: #1a3997;
    }

    .image-warp {
        width: 990px;
        height: 300px;
        display: block;
        margin: 0 auto;
        overflow: hidden;
    }

    .image {
        width: 100%;
        height: 700px;
        background: url("37037_DSC01244.JPG");
    }

    .local1 {
        position: relative;
        bottom: -300px;
        width: 20px;
        height: 20px;
        display: block;
        background-color: #fff;
    }
    .local2 {
        position: relative;
        bottom: -700px;
        width: 20px;
        height: 20px;
        display: block;
        background-color: #fff;
    }
    .fixed {
        position: fixed;
        top: 62px;
    }
</style>
<div class="warp">
    <div class="image-warp">
        <div class="image"></div>
    </div>
    <div class="local1"></div>
</div>
<script>

        var banner2height = $(".local1").offset().top;
        $(window).scroll(function () {
            var this_scrollTop = $(this).scrollTop();
            if (this_scrollTop > banner2height) {
//                $(".image").removeClass("fixed");
            } else {
                $(".image").addClass("fixed");
            }
        });


</script>
</body>
</html>